<template>
  <div class="panel" style="width: 100%;">
    <Title title="产品订单量top10"></Title>
    <div class="chart_container" style="width: 100%; height: calc(100% - 30px)">
      <div id="FMCWLX" class="echart"></div>
    </div>
  </div>
</template>

<script>
  import api from '@/utils/api.js'
  const dataInterval = [0, 10, 50, 100, 500, 1000, 3000]
  import Title from './Title'
  export default {
    name: 'FMCWLX',
    components: {
      Title
    },
    data() {
      return {
        echarts: '',
        seriesData:[],
        option:  {
          grid: {
            top: 38,
            left: '3%',
            right: '3%',
            bottom: 8,
            containLabel: true
          },
          xAxis: {
            data: [],
            axisLabel: {
              lineHeight: 16,
              color: '#333',
              fontWeight: 500,
              fontSize: 14,
              formatter: this.xAxisFormat
            }
          },
          yAxis: {
            nameTextStyle: {
              padding: [0, 0, 0 , -22],
              color: '#333',
            },
            name: '单位(件)',
            axisLabel: {
              //formatter: this.yAxisFormatter,
              color: '#333'
            },
            splitNumber: 5,
            splitLine: {
              lineStyle:{
                type:'dashed'
              }
            }
          },
          tooltip: {
            show: true,
            padding: 0,
            borderWidth: 0,
            backgroundColor: 'rgba(50,50,50,0)',
            formatter: this.toolTipFormatter,
            trigger: 'item',
            axisPointer: {
              type: 'line',
              z: 0,
              lineStyle: {
                color: 'rgba(234, 245, 253, 0.8)',
                width: 20,
                type: 'solid',
              }
            },
            position: 'top',
            /*position: function (point, params, dom, rect, size) {
              let {contentSize, viewSize} = size
              return [point[0]-25, (1-(params[0].value/900)) * 100 + '%']  //返回x、y（横向、纵向）两个点的位置
            },*/
            extraCssText: 'box-shadow: none'
          },
          series: [
            {
              type: 'bar',
              barWidth: 16,
              barMinHeight: 10,
              itemStyle: {
                color: this.setColor(),
                borderRadius: [8, 8, 0, 0]
              },
              backgroundStyle: {
                width: 30
              },
            }
          ]
        },
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initEcharts()
        this.setInitOptions()
        this.getRemoteData()
      })
      this.screenAdapt()
    },
    methods: {
      setColor() {
        return new this.$echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [{offset: 0, color: '#97C6FF'}, {offset: 1, color: '#4C9AF8'}]
        )
      },
      initEcharts() {
        this.echarts = this.$echarts.init(document.getElementById('FMCWLX'), null, {devicePixelRatio: 2.5})
      },
      setInitOptions() {
        this.echarts.setOption(this.option)
      },
      setDataOptions(xAxisData, seriesData) {
        this.seriesData = seriesData
        let seriesData2 = []
        for (let i = 0; i < seriesData.length; i++) {
          //console.log(emailData[i])
          // 1.寻找在数据间隔里小于emailData的最大值
          const min_v = Math.max(...dataInterval.filter((v) => v <= seriesData[i]));
          //console.log(emailData[i] + '-' + min_v);
          // 2.寻找在数据间隔里大于emailData的最小值
          const max_v = Math.min(...dataInterval.filter((v) => v > seriesData[i]));
          //console.log(emailData[i] + '--' + max_v);
          //  3.寻找 min_v 所在的下标
          const index = dataInterval.findIndex((v) => v === min_v);
          //console.log(emailData[i] + '---' + index);
          //  4.计算该amount在y轴上应该展示的位置
          console.log(min_v, max_v)
          const y_value = (((seriesData[i] - min_v) / (max_v - min_v)) * 10) + index * 10;
          //console.log(emailData[i] + '----' + y_value);
          seriesData2[i] = y_value;
        }
        let options = {
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              data: seriesData
            }
          ]
        }
        this.echarts.setOption(options)
      },
      screenAdapt: function () {
        window.addEventListener('resize', () => {
          this.echarts.resize()
        })
      },
      getRemoteData() {
        let xAxisData =  ['一日游', '周边游', '夜店游', '酒吧游', '海边游', '泰国游', '欧洲游', '北极游','南极游','其他']
        let seriesData = [1597, 495, 415, 284, 222, 87, 47, 10, 8, 15]
        this.setDataOptions(xAxisData, seriesData)
        api.salesVolumeByProduct({year: 2023}).then(res => {
          xAxisData = res.data.map(item => item.name)
          seriesData = res.data.map(item => item.num)
          this.setDataOptions(xAxisData, seriesData)
        })
      },
      xAxisFormat(value) {
        let ret = "";//拼接加\n返回的类目项
        let maxLength = 3;//每项显示文字个数
        let valLength = value.length;//X轴类目项的文字个数
        let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
        if (rowN > 1)//如果类目项的文字大于5,
        {
          for (let i = 0; i < rowN; i++) {
            let temp = "";//每次截取的字符串
            let start = i * maxLength;//开始截取的位置
            let end = start + maxLength;//结束截取的位置
            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
            temp = value.substring(start, end) + "\n";
            ret += temp; //凭借最终的字符串
          }
          return ret;
        }
        else {
          return value;
        }
      },
      yAxisFormatter(value, index) {
        // Y轴的自定义刻度值，对应图上的y轴的值
        if (index == 0) {
          value = 0
        } else if (index == 1) {
          value = 10
        } else if (index == 2) {
          value = 50
        } else if (index == 3) {
          value = 100
        } else if (index == 4) {
          value = 500
        } else if (index == 5) {
          value = 1000
        } else {
          value = 3000
        }
        return value + ''
      },
      toolTipFormatter(params) {
        console.log(params)
        let htmlStr = `<div class="bar_tool_box triangleBottom">${this.seriesData[params.dataIndex]}</div>`
        return htmlStr
      }
    }
  }
</script>

<style lang="scss">
  .panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .barContainer {
      //flex: 1;
      .echart {
        height: 100%;
        width: 100%;
      }
    }
    .bar_tool_box {
      background-color: #4c9af8;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border-radius: 10px;
      color: #fff;
    }
  }
</style>
